<template>
    <div>
        <div>
            <el-input prefix-icon="el-icon-search" placeholder="输入名字查找用户.." v-model="keyword" clearable
                      size="small" style="width: 200px;margin-right: 10px" @keydown.enter.native="doSearch"/>
            <el-select v-model="grade" placeholder="请选择年级" size="small" clearable>
                <el-option
                        v-for="item in grades"
                        :key="item"
                        :label="item+'级'"
                        :value="item">
                </el-option>
            </el-select>
            <el-button size="small" round type="primary" icon="el-icon-search" @click="doSearch" style="margin-left: 10px">查找</el-button>
        </div>
        <div class="hr_container">
            <el-card class="hr_card"
                     v-for="(hr,index) in this.hrs" :key="index"
            >
                <div slot="header">
                    <span>{{hr.name}}</span>
                    <el-button style="float: right; padding: 3px 0;color: #ff414e" icon="el-icon-delete" @click="deleteHr(hr)"/>
                </div>
                <div>
                    <div style="display: flex ;justify-content: center">
                        <img :src="hr.avatar" :alt="hr.name" :title="hr.name" class="hr_img">
                    </div>
                    <div class="userinfo_container">
                        <table style="text-align: left;">
                            <tr>
                                <td class="hr_td">用户名：</td>
                                <td>{{hr.username}}</td>
                            </tr>
                            <tr>
                                <td class="hr_td">手机号码：</td>
                                <td>{{hr.phone}}</td>
                            </tr>
                            <tr>
                                <td class="hr_td">学号：</td>
                                <td>{{hr.sno}}</td>
                            </tr>
                            <tr>
                                <td class="hr_td">地址：</td>
                                <td>{{hr.address}}</td>
                            </tr>
                            <tr>
                                <td class="hr_td">用户状态：</td>
                                <td>
                                    <el-switch
                                            v-model="hr.enabled"
                                            @change="changeHr(hr)"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949">
                                    </el-switch>
                                </td>
                            </tr>
                            <tr>
                                <td class="hr_td">邮箱：</td>
                                <td v-if="hr.email!==null">{{hr.email}}</td>
                                <td v-else>无</td>
                            </tr>
                            <tr>
                                <td class="hr_td">用户角色：</td>
                                <td v-if="hr.roles && hr.roles.length!==0">
                                    <el-tag size="small" type="success" v-for="(role,index) in hr.roles"
                                            :key="index" style="margin-right: 5px;margin-top: 4px">
                                        {{role.namezh}}
                                    </el-tag>
                                    <el-popover
                                            placement="bottom"
                                            @show="showPopover(hr)"
                                            @hide="hidePopover(hr)"
                                            title="角色列表"
                                            class="popover"
                                            width="200"
                                            trigger="click">
                                        <el-select v-model="hr_roles" multiple placeholder="请选择">
                                            <el-option
                                                    v-for="(role,index) in allRoles"
                                                    :key="index"
                                                    :label="role.namezh"
                                                    :value="role.id">
                                            </el-option>
                                        </el-select>
                                        <el-button slot="reference" icon="el-icon-more" type="text"
                                                   size="middle"></el-button>
                                    </el-popover>
                                </td>
                                <td v-else>无
                                    <el-popover
                                            placement="bottom"
                                            title="角色列表"
                                            class="popover"
                                            width="200"
                                            trigger="click">
                                        <el-select v-model="hr_roles" multiple placeholder="请选择">
                                            <el-option
                                                    v-for="(role,index) in allRoles"
                                                    :key="index"
                                                    :label="role.namezh"
                                                    :value="role.id">
                                            </el-option>
                                        </el-select>
                                        <el-button slot="reference" icon="el-icon-more" type="text"
                                                   size="middle"></el-button>
                                    </el-popover>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SysOper",
        data() {
            return {
                hrs: [],
                hr_roles: [],
                allRoles: [],
                keyword:'',
                grades:[],
                grade:'',
            }
        },
        mounted() {
            this.initHrs();
            this.initGrade()
        },
        methods: {
            deleteHr(hr){
                this.$confirm('此操作将永久删除【'+hr.name+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(hr)
                    this.deleteRequest('/system/oper/'+hr.id).then(resp=>{
                        if (resp){
                            this.initHrs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doSearch(){
                this.initHrs()
            },
            hidePopover(hr){
                let roles = hr.roles;
                let strRid='';
                roles.forEach(role=>{
                    strRid+=":"+role.id+":";
                });
                let url='/system/oper/roles/?userId='+hr.id;
                let rids='&';
                let flag = false;
                this.hr_roles.forEach(hr_rid=>{
                    if (strRid.indexOf(hr_rid)===-1){
                        flag=true;
                    }
                    rids+='rid='+hr_rid+'&';
                });
                if (this.hr_roles && roles && this.hr_roles.length!==roles.length){
                    flag = true;
                }
                if (flag){
                    this.updateHrRole(url+rids);
                }
            },
            updateHrRole(url){
                this.putRequest(url).then(resp=>{
                    if (resp){
                        this.initHrs();
                    }
                })
            },
            showPopover(hr) {
                this.initRoles();
                let roles = hr.roles;
                this.hr_roles = [];
                roles.forEach(role => {
                    this.hr_roles.push(role.id);
                })
            },
            initRoles(){
                this.getRequest('/system/oper/roles').then(resp=>{
                    if (resp){
                        this.allRoles=resp;
                    }
                })
            },
            changeHr(hr) {
                this.putRequest('/system/oper/?name='+this.keyword+'&grade='+this.grade, hr).then(resp => {
                    this.initHrs();
                })
            },
            initHrs() {
                this.getRequest('/system/oper/?name='+this.keyword+'&grade='+this.grade).then(resp => {
                    if (resp) {
                        this.hrs = resp;
                    }
                })
            },
            initGrade(){
                if(window.sessionStorage.getItem("grades")){
                    this.grades=JSON.parse(window.sessionStorage.getItem("grades"))
                }else{
                    this.getRequest('/system/oper/grades').then(resp=>{
                        if(resp){
                            this.grades = resp;
                            window.sessionStorage.setItem("grades",JSON.stringify(this.grades));
                        }
                    })
                }

            }
        }
    }
</script>

<style>
    .popover {
        margin-left: 8px;
    }

    .hr_td {
        width: 100px;
        text-align: right;
    }

    .userinfo_container {
        font-size: 14px;
        color: #5abaff;
        margin-bottom: 3px;
        margin-top: 10px;
    }

    .hr_img {
        width: 72px;
        height: 72px;
        border-radius: 72px;
        align-items: center;
    }

    .hr_card {
        width: 350px;
        margin-bottom: 20px;
    }

    .hr_container {
        display: flex;
        flex-wrap: wrap;
        margin-top: 30px;
        justify-content: space-around;
    }
</style>